<template>
	<div>
		<!-- 轮播图 -->
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
			<van-swipe-item v-for="item in bannerList" :key="item.id">
				<van-image width="100vw" height="4.83333rem" fit="cover" :src="item.imageUrl" />
			</van-swipe-item>
		</van-swipe>

		<!-- 推荐歌单 -->
		<van-divider content-position="left" class="title">推荐歌单</van-divider>
		<van-row gutter="5">
			<van-col span="8" v-for="item in recommendMusicList" :key="item.id">
				<van-image height="4.5rem" width="100%" fit="cover" :src="item.picUrl" />
				<p class="song_name">{{ item.name }}</p>
			</van-col>
		</van-row>

		<!-- 最新音乐 -->
		<van-divider content-position="left" class="title">最新音乐</van-divider>
		<van-cell-group inset :border="false">
			<!-- <van-cell 
				:title="item.name" 
				:label="item.song.album.artists[0].name + ' - ' + item.name" 
				center 
				v-for="item in newMusicList" 
				:key="item.id"
			>
				<template #right-icon>
					<van-icon name="play-circle-o" size="0.6rem" />
				</template>
			</van-cell> -->
			<SongItem
				v-for="item in newMusicList"
				:key="item.id"
				:name="item.name"
				:author="item.song.album.artists[0].name"
				:id="item.id"
			></SongItem>
		</van-cell-group>
	</div>
</template>

<script>
import { recommendMusicAPI, newMusicAPI, bannerAPI } from '@/api/index.js';
import SongItem from '@/components/SongItem.vue';
export default {
	data() {
		return {
			recommendMusicList: [],
			newMusicList: [],
			bannerList: []
		};
	},

	async created() {
		/* 
		普通写法
		recommendMusicAPI({ limit: 6 }).then(res => this.recommendMusicList = res.data.result);
		newMusicAPI().then(res => this.newMusicList = res.data.result);
		bannerAPI().then(res => this.bannerList = res.data.banners);
		 */

		// 语法糖

		this.recommendMusicList = (await recommendMusicAPI({ limit: 6 })).data.result;
		this.newMusicList = (await newMusicAPI()).data.result;
		this.bannerList = (await bannerAPI()).data.banners;
	},

	components: {
		SongItem
	}
};
</script>

<style scoped>
/* 标题 */
.title {
	/* padding: 0.266667rem 0.24rem; */
	/* margin: 0 0 0.24rem 0; */
	/* background-color: #eee; */
	/* background-color: #f1f1f1; */
	color: #333;
	font-size: 15px;
}
/* 推荐歌单 - 歌名 */
.song_name {
	font-size: 0.346667rem;
	padding: 0 0.08rem;
	margin-bottom: 0.266667rem;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 2; /** 显示的行数 **/
	overflow: hidden; /** 隐藏超出的内容 **/
}
/* 轮播图 */
.my-swipe .van-swipe-item {
	/* color: #fff; */
	/* font-size: 20px; */
	/* line-height: 150px; */
	/* text-align: center; */
	/* background-color: #39a9ed; */
}
</style>
